<script setup>
import { ref } from "vue";
import GridRect from "@/components/GrideRect.vue";
import Text from "@/components/Preview/Text.vue";
import TextEdit from "@/components/EditBox/TextEdit.vue";
import Share from "@/components/Share.vue";

const gridSize = ref(50);

const dragenter = (e) => {
  // e.dataTransfer.dropEffect = "move";
};

const componentsList = [
  {
    name: Text,
  },
];
let currentComponent = null;
const componentsListMap = {
  Text: TextEdit,
};
const componentsEditList = ref([
  {
    template: TextEdit,
    width: 300,
    height: 300,
    left: 50,
    top: 50,
    angle: 0,
  },
]);

const addComponentHandler = (component) => {
  currentComponent = component;
};
const drop = (e) => {
  const targetMap = {
    template: TextEdit,
    width: 300,
    height: 300,
    left: e.offsetX - 150,
    top: e.offsetY - 150,
  };
  componentsEditList.value.push(targetMap);
};
</script>

<template>
  <div class="box">
    <div class="box1">
      <div :key="key" v-for="(val, key) in componentsList" class="btn">
        <component
          :is="val.name"
          @addComponent="addComponentHandler"
        ></component>
      </div>
    </div>
    <div @drop="drop" @dragover.prevent class="box2">
      <div class="drawing-box">
        <div v-for="(val, key) in componentsEditList" :key="key">
          <Share :config="val">
            <component :is="val.template" :config="val"></component>
          </Share>
        </div>
      </div>
      <GridRect :showSmall="true" :grid="gridSize / 5" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  display: grid;
  padding: 10px;
  box-sizing: border-box;
  height: 100vh;
  /* grid-template-columns: repeat(3, 200px); */
  grid-template-columns: 150px 1fr;
  /*  声明行间距和列间距  */
  grid-gap: 20px;
  color: #fff;
  .box1 {
    border: 1px solid #fff;
  }
  .box2 {
    border: 1px solid #fff;
    position: relative;
    .drawing-box {
      position: absolute;
    }
  }
  .btn {
    padding: 10px;
    background: #0075ff;
    color: #fff;
  }
}
</style>
